<template>
  <div>
    <h1><slot></slot></h1>

    <input ref="input" type="text" v-model="counter" />
  </div>
</template>

<script>
export default {
  name: 'VModel',
  computed: {
    counter: {
      get() {
        return this.$store.state.counter
      },
      set(val) {
        let valInt = parseInt(val)
        if (Number.isNaN(valInt)) valInt = 0
        this.$refs.input.value = valInt
        this.$store.commit('setCounter', valInt)
      }
    }
  }
}
</script>
